<template>
  <div class="top_bar">
    <div class="left" @click="$router.push('/')">gjx-admin</div>
    <div class="right">
      <el-tooltip class="item" content="前往个人中心上传头像" effect="dark" placement="bottom">
        <el-image :src="$store.getters['user/avatar']" style="width: 3vw;height: 3vw;border-radius: 50%;"
                  @click.native="toPersonalCenter"/>
      </el-tooltip>
      <div class="user_name">
        <el-tooltip class="item" content="用户名取自登陆时输入的用户名" effect="dark" placement="bottom">
          <el-button @click="toPersonalCenter">{{ $store.getters['user/userName'] || '用户' }}</el-button>
        </el-tooltip>
      </div>
      <button class="button_return" @click="returnLogin">退出登录</button>
    </div>
  </div>
</template>

<script>
import {confirmTheBox} from "@/utils"

export default {
  name: "TopBar",
  methods: {
    returnLogin() {
      confirmTheBox('是否退出登录？', this).then(() => {
        this.$emit("returnLogin", true)
        this.$store.dispatch('user/returnLogin').then(r => {
          this.$emit("returnLogin", false)
          if (r === '200') this.$router.push({
            name: 'LoginIndex'
          })
        })
      }).catch(() => {
        this.$message.success('取消退出登录')
      })
    },
    // 跳转到个人中心
    toPersonalCenter() {
      this.$router.push({
        name: 'PersonalCenter'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.top_bar {
  width: 100%;
  height: 8vh;
  background: #fff;
  padding: 0 3vw;
  display: flex;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);


  .left {
    width: 15vw;
    height: 8vh;
    line-height: 8vh;
    font-size: 4vh;
    color: #464646;
    cursor: pointer;
  }

  .right {
    flex: 1;
    height: 8vh;

    display: flex;
    justify-content: end;
    align-items: center;

    .item {
      cursor: pointer;
    }

    .user_name {
      color: #464646;
      margin-left: 2vw;

      .item {
        border: none;
      }
    }

    .button_return {
      background: #d5d5d533;
      cursor: pointer;
      border-radius: 5px;
      border: none;
      width: 5vw;
      height: 2vw;
      color: #505050;
      margin: 0 2vw;
    }
  }
}
</style>
